@import "../../colors";
@import "../../frameless";

$base-bg: $ui-white;

#view {
    background-color: $ui-white;
    padding: 0;
}

.banner-wrapper {
    background: $ui-aqua bottom right url("/images/ideas/right-juice.png") no-repeat;
}

.ideas-banner {
    margin-bottom: 0;
    background: bottom left url("/images/ideas/left-juice.png") no-repeat;
}

.ttt-section {
    display: flex;
    margin: 0 auto;
    text-align: center;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}

.tips-divider {
    border-top: 1px solid $ui-gray;
    width: 100%;
}

.tips-banner-image {
    max-width: calc(100% - 2rem);
}

.banner-button {
    background-color: $ui-white;
    color: $ui-aqua;
    font-size: 1rem;

    img {
        margin-right: 1rem;
        height: 1.5rem;
        vertical-align: middle;
    }

    a {
        color: $ui-white;
    }

    span {
      vertical-align: middle;
    }
}

.ideas-button {
    margin-right: .75rem;
    background-color: $ui-purple-dark;
    color: $ui-white;
    font-size: 1rem;

    img {
        margin-right: 1rem;
        height: 1.5rem;
        vertical-align: middle;
    }

    a {
        color: $ui-white;
    }

    span {
      vertical-align: middle;
    }
}

.wide-button {
    width: 100%;
}

.ideas-all-cards {
    padding: 5rem 0 !important;
}

.ideas-starter {
    padding: 5rem 0 !important;
}

.tips-getting-started {
    background-color: $ui-light-gray;
    padding-top: 2.5rem;
}

.tips-left {
    justify-content: flex-start;
}

.ideas-image {
    margin-right: 2rem;
}

.tips-activity-guides {
    background-color: $ui-light-gray;
    padding-bottom: 2rem;
}

.purchase-button {
    img {
        margin-right: 0;
        margin-left: .75rem;
        width: 1rem;
        vertical-align: baseline;
    }
}

.tips-info-section {
    padding: 2.5rem 0;
    width: 100%;
    flex-wrap: nowrap;
}

.tips-info-body {
    text-align: left;
}

.tips-cards-buttons {
    a {
        white-space: normal;
    }
}

.gray-area {
    background-color: $ui-gray;
}

img.tips-icon {
    height: 1.75rem;
}
//4 columns
@media #{$small} {

    .title-banner {
        &.masthead {
            padding-bottom: 1.25rem;

            p {
                max-width: $cols4;
            }
        }
    }

    .ttt-head {

        p {
            max-width: $cols4;
        }
    }

    //put the image first if in 4-column
    .tips-info-body {
        max-width: $cols4;
        text-align: center;

        &.tips-illustration {
            order: -1;
            img {
                width: $cols4;
            }
        }

        .button {
            width: 100%;
        }
    }
}

//6 columns
@media #{$medium} {
    .title-banner {
        &.masthead {

            p {
                max-width: $cols6;
            }
        }
    }

    .ttt-head {
        p {
            max-width: $cols6;
        }
    }

    .tips-info-body.tips-illustration {
        order: -1;
        img {
            width: $cols4;
        }
    }

    .tips-info-body {
        max-width: $cols4;
        text-align: center;
    }
}


//8 columns
@media #{$intermediate} {
    .title-banner {
        &.masthead {
            padding-bottom: 2rem;

            p {
                max-width: $cols6;
            }
        }
    }

    .ttt-head {
        p {
            max-width: $cols6;
        }
    }

    .tips-info-section {
        &.mod-align-top {
            align-items: flex-start;
        }
    }

    .tips-info-body {
        max-width: $cols4;
    }
}

// 12 columns
@media #{$big} {
    .title-banner {
        &.masthead {
            padding-bottom: 1.25rem;

            p {
                max-width: $cols8;
            }
        }
    }

    .ttt-head {
        p {
            max-width: $cols8;
        }
    }

    .tips-info-section {
        &.mod-align-top {
            align-items: flex-start;
        }
    }

    .tips-info-body {
        max-width: $cols6;
        &.mod-narrow {
            max-width: $cols5;
        }
    }
}
